{% extends 'web/layout/manage.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'web/css/file.css' %}">
    <style>
        .panel-default > .panel-heading .function .upload{
            overflow: hidden;
        }
        .panel-default > .panel-heading .function .upload input{
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 76px;
            left: -2px;
            overflow: hidden;
        }
        /* 设置进度条显示框*/
        .upload-progress{
            position: fixed;
            right: 2px;
            bottom: 2px;
            width: 400px;
        }
        .upload-progress .progress-error {
            color: red;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div class="panel panel-default" style="margin-top: 20px">
          <div class="panel-heading">
              <div>
                  <a href="{% url 'file' project_id=request.tracer.project.id %}">
                      <i class="fa fa-home" aria-hidden="true"></i>
                      <span>文件库</span>
                  </a>
                  {% for record in breadcrumb_list %}
                    <a href="{% url 'file' project_id=request.tracer.project.id %}?folder={{ record.id }}">
                        <i class="fa fa-caret-right" aria-hidden="true"></i>
                        <span>{{ record.name }}</span>
                    </a>
                  {% endfor %}
              </div>
              <div class="function">
                  <div class="btn btn-primary btn-xs upload" style="position: relative">
                      <div><i class="fa fa-upload" aria-hidden="true"></i> 上传文件</div>
                      <input type="file" multiple name="uploadFile" id="uploadFile">
                  </div>
                  <a class="btn btn-success btn-xs" data-toggle="modal" data-target="#addModal" data-whatever="新建文件夹">
                      <i class="fa fa-plus-circle" aria-hidden="true"> 新建文件夹</i>
                  </a>
              </div>
          </div>
              <table class="table">
                <thead>
                  <tr>
                    <th>名称</th>
                    <th>文件大小</th>
                    <th>更新者</th>
                    <th>更新时间</th>
                    <th>操 作</th>
                  </tr>
                </thead>
                <tbody id="rowList">
                {% for item in file_object_list %}
                  <tr>
                    <td>
                        {% if item.file_type == 1 %}
                            <i class="wenjian fa fa-file" aria-hidden="true" style="color: #d5d5d5"></i>
                            {{ item.name }}
                        {% else %}
                            <a href="{% url 'file' project_id=request.tracer.project.id %}?folder={{ item.id }}">
                                <i class="wenjianjia fa fa-folder" aria-hidden="true" style="color: #7EFC7E"></i>
                                {{ item.name }}
                            </a>

                        {% endif %}
                    </td>
                    <td>
                        {% if item.file_type == 1 %}
                            {{ item.file_size }}
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td>{{ item.update_user.username }}</td>
                    <td>{{ item.update_datetime }}</td>
                    <td>
                        {% if item.file_type == 2 %}
                            <a class="btn btn-default btn-xs"
                               data-toggle="modal"
                               data-target="#addModal"
                               data-name="{{ item.name }}"
                               data-fid="{{ item.id }}"
                               data-whatever="编辑文件夹">
                                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                编辑
                            </a>
                        {% else %}
                            <a class="btn btn-default btn-xs download"
                                href="{% url 'file_download' project_id=request.tracer.project.id file_id=item.id %}">
                                <i class="fa fa-cloud-download" aria-hidden="true"></i>
                            </a>
                        {% endif %}
                        <a class="btn btn-danger btn-xs"
                           data-toggle="modal"
                           data-target="#alertModal"
                           data-fid="{{ item.id }}">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                                  删除
                        </a>
                    </td>
                  </tr>
                {% endfor %}
                </tbody>
              </table>
        </div>
    </div>
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
              <form id="form">
                  {% csrf_token %}
                  <input class="hidden" type="text" name="fid" id="fid">
                  {% for field in form %}
                      <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                          {{ field }}
                          <span class="error-msg" style="color: red">{{ field.errors.0 }}</span>
                      </div>
                  {% endfor %}
                </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
            <button id="btnFormSubmit" type="button" class="btn btn-primary">保 存</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">

        <div class="alert alert-danger alert-dismissible fade in" role="alert">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <h4>确定要删除？</h4>
          <p>文件夹中包含的所有文件都将被删除。</p>
          <p style="text-align: right">
            <a class="btn btn-default btn-sm" data-dismiss="modal" aria-label="Close">取 消</a>
            <button id="btnDelete" type="button" class="btn btn-danger btn-sm">确 定</button>
          </p>
        </div>

      </div>
    </div>
    <!-- 上传进度条 -->
    <div id="uploadProgress" class="upload-progress hide">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <i class="fa fa-cloud-upload" aria-hidden="true"></i>上传进度
            </div>
            <table class="table">
                <tbody id="progressList">
                    <!--<tr>
                        <td>
                            <div class="progress">
                              <div class="progress-bar" role="progressbar" aria-valuenow="0"
                                   aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
                                30%
                              </div>
                            </div>
                        </td>
                    </tr> -->

                </tbody>
            </table>
        </div>
    </div>

    <div class="hide">
        <table id="progressTemplate">
            <tr>
                <td>
                    <div class="name"></div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
                             aria-valuenow="0"
                             aria-valuemin="0"
                             aria-valuemax="100" style="width: 0;">
                            0%
                        </div>
                    </div>
                    <div class="progress-error"></div>
                </td>
            </tr>
        </table>
    </div>
    <div class="hide">
        <table id="rowTpl">
            <tr>
                <td>
                    <i class="fa fa-file" aria-hidden="true"></i><span class="name"></span>
                </td>
                <td class="file_size"></td>
                <td class="update_user__username"></td>
                <td class="update_datetime"></td>
                <td>
                    <a class="btn btn-default btn-xs download">
                        <i class="fa fa-cloud-download" aria-hidden="true"></i>
                    </a>
                    <a class="btn btn-danger btn-xs delete" data-toggle="modal" data-target="#alertModal">
                        <i class="fa fa-trash" aria-hidden="true"></i>  删除
                    </a>
                </td>
            </tr>
        </table>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'web/plugin/cos-js-sdk-v5.min.js' %}"></script>
    <script>
        //var FOLDER_URL = "{% url 'file' project_id=request.tracer.project.id %}";
        var FILE_DELETE_URL = "{% url 'file_delete' project_id=request.tracer.project.id %}";
        var COS_CREDENTIAL = "{% url 'cos_credential' project_id=request.tracer.project.id %}";
        var FILE_POST = "{% url 'file_post' project_id=request.tracer.project.id %}"
        // 通过后端传送过来的folder_object 来获取当前的目录在数据库中保存的id
        var CURRENT_FOLDER_ID = {{ folder_object.id }}

        $(function (){
            initAddModal();
            bindModelSubmit();
            bindDeleteSubmit();
            bindUploadFile();
        });
        // 这个函数的作用是当单击id=addModal的模态框时，把被点击按钮的属性：data-whatever="xxx" 的值xxx 赋值给变量recipient
        // 并且可以把变量的数据赋值给模态框中class属性通过find查找到的对应属性的标签
        function initAddModal(){
            // 当弹出#addModal时会执行这个函数
            $('#addModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget)
                var recipient = button.data('whatever') // 把按钮的属性whatever的值，赋给变量recipient
                var name = button.data('name')
                var fid = button.data('fid')
                var modal = $(this)
                modal.find('.modal-title').text(recipient) // 找到模态对话框的class属性值=modal-title的，把text属性设置成变量recipient的值

                // 根据fid的数据来判断是编辑还是新建，如果是编辑那么fid就有值，如果是新建则fid没有数据
                if(fid){
                    // 编辑
                    modal.find('#id_name').val(name);
                    modal.find('#fid').val(fid);
                }else {
                    modal.find('.error-msg').empty()
                    // 让一个from表单清空，可以用DOM对象方法，也可以用jquery对象方法
                    // DOM方法
                    //document.getElementById('form').reset();
                    // jQuery方法。
                    $('#form')[0].reset();
                }


            })
            // 当弹出#alertModal时会执行这个函数，给标签按钮添加一个属性fid，并把点击删除按钮时获取到的fid赋值给这个属性。
            // 点击删除按钮的传递过来的fid=item.id 即当前行数据的id
            $('#alertModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget)
                var fid = button.data('fid')
                var modal = $(this)
                // 给弹出的模态删除框的删除按钮添加一个属性fid，并把传递过来的itm.id赋值给这个新增的属性
                $('#btnDelete').attr('fid', fid)
            })
        }
        // 点击提交按钮的函数，当点击提交时会发送ajax请求
        function bindModelSubmit(){
            $('#btnFormSubmit').click(function (){
                $.ajax({
                    url:location.href, // location.href获取当前正在访问的url，即如果url中携带?folder=xx时，会把数据发送给原样的连接
                    type:"POST",
                    data:$("#form").serialize(),
                    dataType:"JSON",
                    success:function (res){
                       if(res.status){
                           location.href = location.href //后端函数保存数据到数据库成功，就跳转到data传送过来的url
                       }else {
                           $.each(res.error, function (key, value) { // each(要循环的对象，要执行的函数)
                                    $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })

            })
        }

        function bindDeleteSubmit(){
            $('#btnDelete').click(function (){
                $.ajax({
                    url:FILE_DELETE_URL, // location.href获取当前正在访问的url，即如果url中携带?folder=xx时，会把数据发送给原样的连接
                    type:"GET",
                    data: {fid:$(this).attr('fid')},
                    dataType:"JSON",
                    success:function (res){
                      if(res.status){
                          location.href = location.href
                      }
                    }
                })
            })
        }
        // 当id=uploadFile的input框，内容发生变化时就执行这个函数。这个是未加容量的版本
        /* function bindUploadFile(){
            $('#uploadFile').change(function (){
                var COS_OBJECT = new COS({
            getAuthorization:function (options,callback){
                    //向django后台发送请求，获取临时凭证
                    $.get(COS_CREDENTIAL,{},function (data){
                        var credentials = data && data.credentials;
                        if(!data || !credentials) return console.error('credentials invalid')
                        callback({
                            TmpSecretId:credentials.tmpSecretId,
                            TmpSecretKey:credentials.tmpSecretKey,
                            XCosSecurityToken:credentials.sessionToken,
                            StartTime:data.startTime,
                            ExpiredTime:data.expiredTime,
                        });
                    });
                }
        }) // 获取临时凭证放在循环里面
                var fileList = $(this)[0].files;
                $.each(fileList,function (index,fileObject){
                    COS_OBJECT.putObject({
                        Bucket:'{{ request.tracer.project.bucket }}',
                        Region:'{{ request.tracer.project.region }}',
                        Key:filename,
                        Body:fileObject,
                        onProgress:function (progressData){
                            console.log("文件上传进度--->",filename,JSON.stringify(progressData));
                        }
                    },function (err,data){
                        console.log(err || data);
                    })
                })
            })
        }*/
        // 获取临时凭证，上传文件。这个是加了容量的测试的版本
        function bindUploadFile(){
            $('#uploadFile').change(function (){
                $('#progressList').empty();
                var checkFileList = []; // 获取要上传的每个文件的名称和大小，每个文件存储的是一个字典格式的数据

                var fileList = $(this)[0].files;
                $.each(fileList,function (index,fileObject){
                    checkFileList.push({'name':fileObject.name,'size':fileObject.size});
                    })
                // 把存放文件的名字和大小的列表checkFileList 中的数据，通过ajax传送到后台，在后台中处理这些数据。如果这些数据的
                // 总的大小超过设置的容量就弹出提示，否则的话就返回临时凭证给前端
                // 先定义一个获取临时凭证的对象，通过上面定义的下面这个变量，跟视图函数中的cos_credential函数联系起来
                // var COS_CREDENTIAL = "{% url 'cos_credential' project_id=request.tracer.project.id %}";
                var cos_credential = new COS({
                    getAuthorization:function (options,callback){
                            //向django后台发送请求，获取临时凭证。发送的方式是get： $.get，接收的后台函数是：COS_CREDENTIAL 这个变量代表的url
                            // 所以可以把发送方式改成post：$.post,这样后台函数就可以用：request.POST 把发送过来的数据接收下来
                            $.post(COS_CREDENTIAL,
                                JSON.stringify(checkFileList), // 把数据：data，通过post传送给后台函数
                                function (res) {  // data是后台返回来的数据
                                    if(res.status){
                                        var credentials = res.data && res.data.credentials;
                                        //if (!res.data || !credentials) return console.error('credentials invalid')
                                        callback({
                                            TmpSecretId: credentials.tmpSecretId,
                                            TmpSecretKey: credentials.tmpSecretKey,
                                            XCosSecurityToken: credentials.sessionToken,
                                            StartTime: res.data.startTime,
                                            ExpiredTime: res.data.expiredTime,
                                        });
                                        // 当授权通过以后会把上传的对话框展示出来
                                        $('#uploadProgress').removeClass('hide')
                                }else {
                                        alert(res.error);
                                    }
                            });
                        }
                })
                // 上传文件，上传之前先在上面获取临时凭证
                $.each(fileList,function (index,fileObject){
                    var filename = fileObject.name;
                    var filesize = fileObject.size; //fileObject.size 这个是js中自带的属性，不是数据库中的字段file_size
                    // 为了让文件不重名，利用当前的时间+传入的文件名来生成文件名
                    var key = (new Date()).getTime() + '_' + filename
                    // 每添加一个上传的文件，就把进度条复制一份。先查找id=progressTemplate的标签，再在这个标签下面查找tr标签
                    // 并复制整个tr标签，复制包含tr。把复制好的标签赋值给变量: $tr
                    var $tr = $('#progressTemplate').find('tr').clone();
                    $tr.find('.name').text(filename); // 找到tr标签下面的class属性的值等于name的标签，并把文件名赋值给它
                    $('#progressList').append($tr); // 找到id属性是progressList的标签即<tbody>标签，把复制的tr标签放在它的下面
                    cos_credential.putObject({
                        Bucket:'{{ request.tracer.project.bucket }}',
                        Region:'{{ request.tracer.project.region }}',
                        Key:key,
                        Body:fileObject,
                        onProgress:function (progressData){
                            //console.log("文件上传进度--->",filename,JSON.stringify(progressData));
                            //var dataDict = JSON.stringify(progressData);
                            var percent = progressData.percent * 100 + '%';
                            $tr.find('.progress-bar').text(percent);
                            $tr.find('.progress-bar').css('width',percent);
                        }
                    },function (err,data){
                        console.log(err || data);
                        if(data && data.statusCode == 200){
                            // 上传成功后，把文件名字写入到数据库
                            // 当前文件上传成功,$.post相当于ajax中模式是post
                            $.post(FILE_POST,{
                                'name':filename,
                                'key':key,
                                'file_size':filesize, // 这个是数据库中字段file_size，不是随便一个变量
                                'parent':CURRENT_FOLDER_ID, // 把这个文件的父目录也写入到数据库中
                                'etag':data.ETag, // 腾讯给的任务id
                                'file_path':data.Location, // 生成的文件访问路径，也可以自己拼接
                            },function (res){
                                // 在数据库中写入成功，将已添加的数据在页面上动态展示
                                var newTr = $('#rowTpl').find('tr').clone();
                                newTr.find('.name').text(res.data.name);
                                newTr.find('.file_size').text(res.data.file_size);
                                newTr.find('.update_user__username').text(res.data.username);
                                newTr.find('.update_datetime').text(res.data.datetime);
                                newTr.find('.delete').attr('data-fid',res.data.id); //添加完不刷新页面时，直接点删除的话，可以让系统获取要删除数据的id
                                newTr.find('.download').attr('href',res.data.download_url);

                                $('#rowList').append(newTr);
                                // 上传成功后进度条删除
                                $tr.remove();
                            })
                        }else {
                            $tr.find('.progress-error').text('上传失败')
                        }
                    })
                })
            })
        }
    </script>
{% endblock %}










